<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">充电桩列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="桩点名称">
						<el-input v-model="name" placeholder="请输入桩点名称查询" clearable @change="sousuo()" style="width: 300px;"></el-input>
					</el-form-item>

					<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询</el-button></el-form-item>
					<el-form-item><el-button type="primary" @click="add()" icon="el-icon-circle-plus-outline">新建充电桩</el-button></el-form-item>
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="site_device_id" label="桩点编号"></el-table-column>
					<el-table-column prop="name" label="桩点名称"></el-table-column>
					<el-table-column prop="device_id" label="设备编号"></el-table-column>
					<el-table-column prop="max_power" label="最大输出功率(W)"></el-table-column>
					<el-table-column prop="site_name" label="所属站点"></el-table-column>
					<el-table-column prop="address" label="桩点地址"></el-table-column>
					<el-table-column label="经纬度">
						<template slot-scope="scope">
							<div>{{scope.row.longitude}} / {{scope.row.latitude}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="state" label="二维码" width="80px">
						<template slot-scope="scope">
							<el-image 
							    style="width: 50px; height: 50px"
							    :src="scope.row.invite_attent_qrcode" 
							    :preview-src-list="[scope.row.invite_attent_qrcode]">
							  </el-image>
						</template>
					</el-table-column>
					<el-table-column prop="createtime" label="创建时间"></el-table-column>

					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="addEdit(scope.row.type,scope.row.site_device_id)">修改</el-button>
							<el-button size="mini" @click="setPowerOpen(scope.row.device_id)">设置功率</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination
					background
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					:pager-count="pageCount"
					prev-text="上一页"
					next-text="下一页"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<el-dialog :title="form.site_device_id ? '修改桩点' : '添加桩点'" :visible.sync="dialogVisible" :fullscreen="true">
			<el-row>
			  <el-col :span="8">
				<el-form ref="form" :model="form" label-width="120px" class="form">
					<el-form-item label="桩点名称"><el-input placeholder="请输入桩点名称" v-model="form.name"></el-input></el-form-item>
					<el-form-item label="所属站点">
						<el-select v-model="form.site_id" style="width:100%"  placeholder="请选择所属站点">
							<el-option v-for="(item, index) in sitelist" :key="index" :label="item.site_name" :value="item.site_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关联设备">
						<el-select v-model="form.device_id" style="width:100%"  placeholder="请选择关联设备">
							<el-option v-for="(item, index) in devicelist" :key="index" :label="item.device_id" :value="item.device_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="桩点地址"><el-input placeholder="请输入桩点地址" v-model="form.address"></el-input></el-form-item>
					<el-form-item label="经纬度(坐标)"><el-input  placeholder="请输入经纬度(坐标)" v-model="form.lnglat"></el-input></el-form-item>
					<el-form-item label="">
						<span style="color: red;margin-right: 10px;">经纬度（坐标）格式：31.150960,121.336050</span>
						  <el-link type="primary" href="https://lbs.qq.com/getPoint/" target="_blank" :underline="false" icon="el-icon-location-outline">地图经纬度拾取器 >></el-link>
					</el-form-item>
					<el-form-item label="备注信息"><el-input type="textarea" :rows="4" placeholder="请输入备注信息" v-model="form.remark"></el-input></el-form-item>
					<el-form-item label="">
						<el-button type="primary" @click="save()">提 交</el-button>
						<el-button @click="dialogVisible = false">取 消</el-button>
					</el-form-item>
				</el-form>
			  </el-col>
			  <el-col :span="16">
				  <div style="margin:0 40px;">
				  	<iframe width="100%" height="750px"  class="iframe" src="https://lbs.qq.com/getPoint/" frameborder="0" />
				  </div>
				  <!-- <img style="margin-left: 40px;" src="https://charge-pile.oss-cn-hangzhou.aliyuncs.com/image/203da8a1f87016d24b491fed26a2556.png" > -->
			  </el-col>
			</el-row>
		</el-dialog>
		
		<el-dialog title="设置最大输出功率值(W)" :visible.sync="dialogVisible1" width="400px">
			 <el-input v-model="setItem.maxPower" placeholder="请输入最大输出功率值"></el-input>
			 <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible1 = false">取 消</el-button>
			    <el-button type="primary" @click="setPower()">确 定</el-button>
			  </span>
		</el-dialog>
	</div>
</template>

<script>
import { query ,save ,add_edit, setPower} from '@/api/pile-point-admin';
export default {
	name: 'pile-point-admin',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			setItem: {
				deviceId:'',
				maxPower:''
			},
			name: '',
			state:'',
			form: {
				site_device_id: '',
				name: '',
				type:1,
				address:'',
				site_id:'',
				device_id:'',
				remark:'',
				lnglat:''
			},
			dialogVisible: false,
			dialogVisible1:false,
			options: [
				{
					value:1,
					label: '正常'
				},
				{
					value:2,
					label: '待审核'
				},
				{
					value:3,
					label: '审核失败'
				},
				{
					value:4,
					label: '禁止下架'
				},
			],
			sitelist:[],
			devicelist:[]
		};
	},
	computed: {
		
	},
	created() {
		this.getData();
		this.addEditInit()
	},
	methods: {
		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize
			};
			if (this.name) {
				data['name'] = this.name;
			}
			if (this.state) {
				data['state'] = this.state;
			}
			query(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		addEditInit() {
			add_edit({type:1}).then(res => {
				if (res.state) {
					this.sitelist = res.data.sitelist
					this.devicelist = res.data.devicelist
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		addEdit(type,id) {
			add_edit({type,id}).then(res => {
				if (res.state) {
					if(res.data.pileInfo.longitude && res.data.pileInfo.latitude) {
						res.data.pileInfo.lnglat = res.data.pileInfo.longitude +','+ res.data.pileInfo.latitude
					}
					this.form = res.data.pileInfo
					this.dialogVisible = true;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		setPowerOpen(deviceId) {
			this.setItem= {
				deviceId:deviceId,
				maxPower:''
			},
			this.dialogVisible1 = true;
		},
		setPower(type,id) {
			if(!this.setItem.maxPower) {
				this.$message.error('请设置最大功率！');
				return
			}
			setPower(this.setItem).then(res => {
				if (res.state) {
					this.getData();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.dialogVisible1 = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		
		// 添加修改
		save() {
			if (!this.form.name) {
				this.$message.error('请输入桩点名称！');
				return;
			}
			if (!this.form.site_id) {
				this.$message.error('请选择所属站点！');
				return;
			}
			if (!this.form.device_id) {
				this.$message.error('请选择关联设备！');
				return;
			}
			if (!this.form.address) {
				this.$message.error('请输入桩点地址！');
				return;
			}
			if (!this.form.lnglat) {
				this.$message.error('请输入经纬度！');
				return;
			}
			if (!this.form.remark) {
				this.$message.error('请输入备注信息！');
				return;
			}

			let data = {};
			if (this.form.site_device_id) {
				data['pile.site_device_id'] = this.form.site_device_id;
			}
			data['pile.name'] = this.form.name;
			data['pile.type'] = this.form.type;
			data['pile.address'] = this.form.address;
			data['pile.site_id'] = this.form.site_id;
			data['pile.device_id'] = this.form.device_id;
			data['pile.remark'] = this.form.remark;
			data['lnglat'] = this.form.lnglat;
			save(data).then(res => {
				if (res.state) {
					if (!this.form.site_device_id) {
						this.currentPage = 1;
					}
					this.getData();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.dialogVisible = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		add() {
			this.form = {
				site_device_id: '',
				name: '',
				type:1,
				address:'',
				site_id:'',
				device_id:'',
				remark:'',
				lnglat:''
			};
			this.dialogVisible = true;
		},

		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		}
	}
};
</script>
<style lang="scss" scoped>
.form {
	.title {
		line-height: 36px;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
		margin: 12px;
	}
}
</style>
